<template>
  <a-drawer
    destroyOnClose
    :title="record.name"
    width="1200"
    :closable="false"
    @close="onClose"
    :visible="visible"
    class="ene-w-h-d"
  >
    <a-row class="top-row">
      <a-col :lg="4" :md="12" :sm="24">
        <a-form-item :colon="false" label="库房编号">
          {{ record.psNub }}
        </a-form-item>
      </a-col>
      <a-col :lg="4" :md="12" :sm="24">
        <a-form-item :colon="false" label="库房类型">
          {{ record.type_dictText }}
        </a-form-item>
      </a-col>
      <a-col :lg="4" :md="12" :sm="24">
        <a-form-item :colon="false" label="管理人员">
          {{ record.managerId_dictText }}
        </a-form-item>
      </a-col>
      <a-col :lg="4" :md="12" :sm="24">
        <a-form-item :colon="false" label="联系电话">
          {{ record.phone_dictText }}
        </a-form-item>
      </a-col>
      <a-col :lg="4" :md="12" :sm="24">
        <a-form-item :colon="false" label="库房地址">
          {{ record.address }}
        </a-form-item>
      </a-col>
      <a-col :lg="4" :md="12" :sm="24">
        <a-form-item :colon="false" label="库位总数">
          {{ record.whNub }}
        </a-form-item>
      </a-col>
    </a-row>

    <a-tabs defaultActiveKey="1" @change="handleChange">
      <a-tab-pane tab="基础信息" key="1" :forceRender="true">
        <a-collapse :defaultActiveKey="['1','2']" :bordered="false">
          <a-collapse-panel key="1" header="基础信息">
            <a-row class="basic-info-box">
              <a-col :span="10">
                <a-form-model-item :colon="false" label="库房名称" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="name">
                  <a-input disabled v-model="record.name" placeholder="请输入库房名称"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10" :offset="4">
                <a-form-model-item :colon="false" label="库位编号" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="psNub">
                  <a-input disabled v-model="record.psNub" placeholder="请输入库位编号"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10">
                <a-form-model-item :colon="false" label="库房类型" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="type">
                  <a-input disabled v-model="record.type_dictText"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="10" :offset="4">
                <a-form-model-item :colon="false" label="管理人员" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="managerId">
                  <a-input disabled v-model="record.manager_dictText"/>
                </a-form-model-item>
              </a-col>

              <a-col :span="24">
                <a-form-model-item :colon="false" label="库房地址" :labelCol=" {
        xs: {span: 24},
        sm: {span: 2},
      }" :wrapperCol="{
        xs: {span: 24},
        sm: {span: 8},
      }" prop="address">
                  <a-input disabled v-model="record.address" placeholder="请输入库房地址"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10">
                <a-form-model-item :colon="false" label="库位总数" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="address">
                  <a-input disabled v-model="record.address" placeholder="请输入库房地址"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10" :offset="4">
                <a-form-model-item :colon="false" label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="notes">
                  <a-input disabled v-model="record.notes" placeholder="请输入备注"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>

          </a-collapse-panel>
          <a-collapse-panel key="1" header="系统信息">
            <a-row class="system-info-box">
              <a-col :span="10">
                <a-form-model-item :colon="false" label="创建人" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="name">
                  <a-input disabled v-model="record.createBy" placeholder=""></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10" :offset="4">
                <a-form-model-item :colon="false" label="创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="name">
                  <a-input disabled v-model="record.createTime" placeholder=""></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10">
                <a-form-model-item :colon="false" label="执行人" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="name">
                  <a-input disabled v-model="record.updateBy" placeholder=""></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="10" :offset="4">
                <a-form-model-item :colon="false" label="执行时间" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                   prop="name">
                  <a-input disabled v-model="record.updateTime" placeholder=""></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-collapse-panel>
        </a-collapse>
      </a-tab-pane>
      <a-tab-pane tab="库位管理" key="2" :forceRender="true">
        <a-input-search placeholder="库位名称/前缀/货架号" style="width: 200px;margin-bottom: 20px" @search="onSearch" />
        <a-table
          :rowKey="rowKey"
          :columns="columns"
          :dataSource="dataSource"
          >
          <template slot="name" slot-scope="text, record">
            {{record.prefix}}-{{record.shelfNub}}-{{record.layersNub}}-{{record.positionNub}}

          </template>
<!--         <span slot="action" slot-scope="text, record">
          <a @click="delKuwei(record)">删除</a>
         </span>-->
        </a-table>
      </a-tab-pane>
    </a-tabs>

  </a-drawer>
</template>
<script>
import {JVXETypes} from "@comp/jeecg/JVxeTable";
import {getAction, postAction} from "@api/manage";

const columns = [
  {
    title: '库位名称',
    dataIndex: 'name',
    scopedSlots: {customRender: 'name'},
  },
  {
    title: '前缀',
    dataIndex: 'prefix',
  },
  {
    title: '货架号',
    dataIndex: 'shelfNub',
  },
  {
    title: '层号',
    dataIndex: 'layersNub',
    width: "260px",
  },
  {
    title: '货位号',
    dataIndex: 'positionNub',

  },
/*  {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'},
  },*/
]
export default {
  props: {
    record: {
      require: true,
      type: Object
    },
    visible: {
      default: false,
      require: true,
      type: Boolean
    },

  },
  data() {
    return {
      url:{
          queryEneWarehouseLocation:'/ene/eneWarehouse/queryEneWarehouseLocation',
        delEneWarehouseLocation:'/ene/eneWarehouse/delEneWarehouseLocation'
      },
      dataSourceCopy:[],
      dataSource:[],
      columns,
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19},
      },
    }
  },
  mounted() {

  },
  methods: {
    onSearch(value){
      if(value==""||value==null){
        this.dataSource=[...this.dataSourceCopy]
      }else{
        this.dataSource=this.dataSourceCopy.filter(e=>{
          return value==e.prefix||value==e.shelfNub||value==`${e.prefix}-${e.shelfNub}-${e.layersNub}-${e.positionNub}`
        })
      }

    },
    getData(){
      this.dataSource=[]
      this.dataSourceCopy=[]
      getAction(this.url.queryEneWarehouseLocation,{id:this.record.id}).then(res=>{
        if(res.success){
          this.dataSource=res.result
          this.dataSourceCopy=res.result
        }
      })
    },
    handleChange(value){
      if(value=='2'){
        this.getData()
      }

    },
/*    delKuwei(record) {
      postAction(this.url.delEneWarehouseLocation,record).then(res=> {
        this.getData()
      })
    },*/
    onClose() {
      this.visible = false
    }
  }
}
</script>
<style scoped>
.top-row {
  background: #F4F5F7;
  padding: 12px 24px;

}

.top-row /deep/ .ant-form-item {
  margin-bottom: 0;
  color: #6B778C
}

.top-row /deep/ .ant-form-item-label {
  line-height: 1;
}

.top-row /deep/ .ant-form-item-control {
  line-height: 1;
  margin-top: 10px;
}

.top-row /deep/ .ant-form-item-label > label {
  color: #6B778C
}

.basic-info-box, .system-info-box {
  padding: 20px 0;
}

.basic-info-box /deep/ .ant-form-item, .system-info-box /deep/ .ant-form-item {
  margin-bottom: 20px;
}

.basic-info-box /deep/ .ant-form-item-label > label {
  color: #172B4D;
}

.ene-w-h-d /deep/ .ant-collapse-borderless > .ant-collapse-item {
  border: none;
}

.ene-w-h-d /deep/ .ant-collapse-header {
  background: #F4F5F7;
}

.ene-w-h-d /deep/ .ant-collapse {
  background: transparent;
}

.ene-w-h-d /deep/ .ant-input[disabled] {
  background: #ebecf0;
  color:#344563
}

.ene-w-h-d /deep/ .ant-collapse-content > .ant-collapse-content-box {
  padding: 0
}
</style>